<template>
  <el-dialog :visible="isShowPerm" title="分配权限" width="40%" @close="onClose">
    <!-- 树形权限列表 -->
    <el-tree ref="treePermRef" :default-checked-keys="permIds" node-key="id" :data="treePermList" :props="defaultProps" default-expand-all show-checkbox check-strictly />
    <template #footer>
      <el-row type="flex" justify="center">
        <el-button type="primary" size="mini">确定</el-button>
        <el-button type="info" size="mini" @click="onClose">取消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>

import { listTree } from '@/utils'
import { getPermission } from '@/api/permisson'
import { getPermIds } from '@/api/role'

export default {
  name: 'PermDialog',
  props: {
    isShowPerm: Boolean
  },
  data() {
    return {
      treePermList: [],
      defaultProps: {
        children: 'children',

        label: 'name' // 获取对象中的 name 属性对应的值显示在页面上
      },
      permIds: []
    }
  },

  methods: {
    onClose() {
      this.$refs.treePermRef.setCheckedKeys([])
      this.$emit('update:is-show-perm', false)
    },
    async getPermList(id) {
      // 获取所有权限列表
      this.treePermList = listTree(await getPermission(), 0)
      // 获取当前角色本身拥有的权限
      const { permIds } = await getPermIds(id)
      this.permIds = permIds

      // setCheckedKeys 是 tree 组件的实力身上的方法
      //   this.$refs.treePermRef.setCheckedKeys(permIds)

      // 仅仅是个标识，vue 说了，但凡是 $ 开头的属性，方法，都是我内置的，你，是直接可以用的
      // 声明变量的时候：可以是以字母，数字，下划线，$ 开头的变量，数字不能开头
    }
  }
}
</script>
